<template>
  <div>管理员列表：</div>
  <el-button @click="showAddAdmin">添加管理员</el-button>
  <el-drawer v-model="drawerAdmin" append-to-body destroy-on-close>
    <h1>添加管理员</h1>
    <AddAdmin @cancel="cancelFn" @ok="okFn"></AddAdmin>
  </el-drawer>

  <el-table :data="adminList" style="width: 100%">
    <el-table-column prop="adminid" label="编号" width="180" />

    <el-table-column prop="adminname" label="管理员名字" />
    <el-table-column label="密码">
      <template #default>
        <span>******</span>
      </template>
    </el-table-column>

    <el-table-column label="角色">
      <template #default="scope">
        <span>{{adminType[scope.row.role]}}</span>
      </template>
    </el-table-column>

    <el-table-column label="删除">
      <template #default="scope">
        <el-popconfirm title="您真的要删除吗?" @confirm="deleteAdmin(scope.row.adminid)">
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>


    <el-table-column label="修改">
      <template #default="scope">
        <el-button @click="showEditAdmin(scope.row.adminname,scope.row.password)">修改</el-button>
      </template>
    </el-table-column>

    <el-drawer v-model="drawerEditAdmin" append-to-body destroy-on-close>
      <h1>修改管理员</h1>
      <EditAdmin :adminname="editAdminName" :password="editAdminPass" @ok="editOkFn" ></EditAdmin>
    </el-drawer>

  </el-table>
</template>

<script setup lang="ts">

import AddAdmin from "./AddAdmin.vue";
import EditAdmin from "./EditAdmin.vue"

import { reactive, ref } from "vue";
import type { IAdmin } from "@/myTypes";
import { getAdminListApi, deleteAdminApi } from "@/api/admin.ts";
import type { AxiosResponse } from "axios";
import { ElMessage } from 'element-plus';


// 四、修改管理员
const drawerEditAdmin = ref(false);
const editAdminName = ref("");
const editAdminPass = ref("");

// 显示修改窗口
function showEditAdmin(adminname:string,password:string){
  drawerEditAdmin.value = true;

  editAdminName.value =  adminname;
  editAdminPass.value =  password;

}

function editOkFn(){
  drawerEditAdmin.value = false;
  getAdminList();
}


// 一、管理员列表：

// 定义一个数组，存放管理员的信息
const adminList = reactive<Array<IAdmin>>([]);

// 后台管理系统的操作人员：
const adminType = {
  "1":"超级管理员",
  "2":"管理员",
  "3":"轮播图维护员",
  "4":"商品管理员"
}


// 获取管理员的列表
function getAdminList() {
  getAdminListApi()
    .then((res: AxiosResponse) => {
      if (res.data.code === "200") {
        adminList.length = 0;
        adminList.push(...res.data.data);
      }
    })
}

getAdminList();

// 二、添加管理员
const drawerAdmin = ref(false);

function showAddAdmin() {
  console.log("showAddAdmin");
  drawerAdmin.value = true;
}

//三、 删除管理员
function deleteAdmin(adminid: string) {
  deleteAdminApi(adminid)
    .then((res: AxiosResponse) => {
      if (res.data.code === "200") {
        ElMessage({
          type: "success",
          message: "删除成功！"
        })
        getAdminList();
      }
    })
}

function okFn() {

  drawerAdmin.value = false;
  getAdminList();
}

function cancelFn() {
  drawerAdmin.value = false;
}






</script>

<style>

</style>